http://221.226.116.70:18899/zj-jsb/dmk/lpz.git
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <title>Charts</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=f9de95ad929f06841af35bae0ce64a4b"></script>
  </head>
  <body onLoad="onLoad()">
    <!-- 头部的盒子 -->
    <header>
      <h1>盐城市智慧工地监管平台</h1>
      <div class="showTime"></div>
      <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.querySelector(".showTime").innerHTML =
            "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      </script>
    </header>
    <!-- 页面主题部分 -->
    <section class="mainbox">
      <!-- 左侧模块制作 -->
      <div class="column">
        <div class="panel bar1 before_element">
          <h2>年度开工项目统计</h2>
          <div class="chart1"></div>
          <div class="panel-footer after_element"></div>
        </div>
        <div class="panel bar2 before_element">
          <h2>智慧工地区域统计</h2>
          <div class="chart2"></div>
          <div class="panel-footer after_element"></div>
        </div>
        <div class="panel line before_element">
          <h2>项目新增终止情况</h2>
          <div class="chart3"></div>
          <div class="panel-footer after_element"></div>
        </div>
      </div>
      <!-- 中间模块制作 -->
      <script>
        var zoom = 9;
        function onLoad() {
          var data = [
            [120.316322, 32.868927, "地址：A市B区C大街D号"],
            [119.793465, 33.465586, "地址：a市b区c门x大街"],
            [120.225446, 33.7602, "地址：XX市ZZ区WW路HH弄"],
            [120.191334, 33.392985, "地址：江苏省盐城市亭湖区XX路"],
          ];
          var map = new T.Map("mapDiv", { datasourcesControl: true });
          map.centerAndZoom(new T.LngLat(120.156672, 33.350937), zoom);
          var points = [];
          points.push(new T.LngLat(120.18459, 33.34544));
          points.push(new T.LngLat(120.14339, 33.32336));
          points.push(new T.LngLat(120.11833, 33.33913));
          points.push(new T.LngLat(120.15301, 33.36294));
          points.push(new T.LngLat(120.18459, 33.34544));
          //创建线对象
          var line = new T.Polyline(points, {
            color: "red",
            weight: 4,
            // opacity: 0.5,
            // lineStyle: "dashed",
          });
          //向地图上添加线
          map.addOverLay(line);
          //创建对象
          var ctrl = new T.Control.MapType();
          //添加控件
          map.addControl(ctrl);
          for (var i = 0; i < data.length; i++) {
            var marker = new T.Marker(new T.LngLat(data[i][0], data[i][1])); // 创建标注
            var content = data[i][2];
            map.addOverLay(marker); // 将标注添加到地图中
            addClickHandler(content, marker);
          }
          function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
              openInfo(content, e);
            });
          }
          function openInfo(content, e) {
            var point = e.lnglat;
            marker = new T.Marker(point); // 创建标注
            var markerInfoWin = new T.InfoWindow(content, {
              offset: new T.Point(0, -30),
            }); // 创建信息窗口对象
            map.openInfoWindow(markerInfoWin, point); //开启信息窗口
          }
          // 添加鹰眼控件
          var miniMap = new T.Control.OverviewMap({
            isOpen: true,
            size: new T.Point(100, 100),
          });
          map.addControl(miniMap);
        }
      </script>
      <div class="column">
        <div class="map before_element">
          <h2 id="myMap">盐城市地图</h2>
          <div class="chart4" id="mapDiv"></div>
          <div class="panel-footer after_element"></div>
        </div>
        <div class="line_second before_element">
          <h2>全市扬尘曲线图</h2>
          <div class="chart5"></div>
          <div class="panel-footer after_element"></div>
        </div>
      </div>
      <!-- 右侧模块制作 -->
      <div class="column">
        <div class="map before_element">
          <h2>智慧工地设备统计</h2>
          <div class="chart6"></div>
          <div class="panel-footer after_element"></div>
        </div>
        <div class="line_second before_element">
          <h2>起重机械设备情况</h2>
          <div class="chart7"></div>
          <div class="panel-footer after_element"></div>
        </div>
      </div>
    </section>

    <script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>
